<template>
  <!-- 导航栏 -->
  <div class="body-main">
    <div class="navbar-list">
      <!-- 面包屑 -->
      <div class="search-box lin">
        <a href="#">首页</a>
        >
        <a href="#">全部搜索结果</a>
        >
        <!-- 大于号 -->
        <!-- <div></div> -->
        <!-- 具体搜索内容 -->
        <span>生态链</span>
      </div>
      <!-- 导航条 -->
      <div class="nav-box">
        <div class="lin">
          <span class="frist">分类:</span>
          <div class="warp">手机数码/电脑办公</div>
          <span>家用电器</span>
        </div>
        <div class="lin">
          <span class="frist">品牌:</span>
          <span>360</span>
        </div>
        <div>
          <span class="frist">排序:</span>
          <span class="moren">默认</span>
          <span>价格</span>
          <input type="checkbox" />仅看有货产品
        </div>
      </div>
    </div>

    <!-- 产品列表 -->
    <div class="product-list">
      <!-- 产品列表 -->
      <div class="list-box">
        <div class="cell" v-for="(item, index) in data" :key="index">
          <div>
            <img :src="`http://127.0.0.1:7777/${item.smpic}`" alt="" />
          </div>
          <span>{{ item.title }}</span>
          <span class="price">￥{{ item.newprice }}</span>
          <span class="cart">
            <img src="../assets/img/shoplist/购物车_.png" alt="" />
            加入购物车
          </span>
        </div>
      </div>

      <!-- 上一页  下一页 -->
      <div class="page">
        <span>首页</span>
        <span>上一页</span>
        <span class="cur">1</span>
        <span class="cur">2</span>
        <span>下一页</span>
        <span>尾页</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let url = "/laptop";
      this.axios.get(url).then(res => {
        console.log(res);
        this.data = res.data.data;
        console.log(this.data);
      });
    },
  },
};
</script>
<style scoped src="../assets/css/product.css"></style>
<style lang="scss" scoped></style>
